/**
 * @author luther.seven@gmail.com
 */

loadScript("getLive.js");
loadScript("getForecast.js");
loadScript("getCameras.js");
loadScript("popup.js");

var zipCode = "";
var apiKey = "A4453822553"

var weatherStorage = "weatherBug";
var weatherCode;

 function mainButtonHandler(e)
{
    switch(e.buttonId)
    {
        case dcKeyEvent.BUTTON_ID_BACK:
        {
            // navigate back
            if (window.history.length)
                window.history.back();
        }
        break;
		
		case dcKeyEvent.BUTTON_ID_MENU:
        {
            zipCode = "";
			showUserPopup();
        }
        break;
		
		case dcKeyEvent.BUTTON_ID_INFO:
		{
			showCamPopup();
		}
		break;

    }
}

function onLoadComplete(){
	var dctk = connected.toolkit;
	
	dctk.logicalWidth = 640;
	dctk.logicalHeight = 360;
	
	// create root panel
	var root = dctk.createPanelCtrl("root", true);
	root.width = 640;
	root.height = 360;
	root.backgroundStyle = dctkIElement.BACKGROUND_STYLE_IMAGE;
	root.backgroundImg.src = "chrome://connected/content/new_back.jpg";
	root.color.rgb = 0x000000;
	root.filled = true;
	root.onUnhandledKeyEvent = mainButtonHandler;
	dctk.rootPanel = root;
	
	var margin = 20;
	var colorTxt = 0x9e9e9e;
	var colorValue = 0xffffff;
	var forecastFont = 11;
	
	var today = dctk.createPanelCtrl("today", true);
	today.setRect(margin,margin,(root.width/2)-margin,(root.height)-margin);
	today.color.rgb = 0x000000;
	today.color.rgba = 0x5B5;
	today.filled = true;
	today.border.thickness = 3;
    today.border.rounded = true;
    //today.border.faded = true;
	root.addChild(today);
	
	var iconToday = dctk.createImageCtrl("iconToday", true);
	iconToday.setRect(margin, (today.height/3)*2, (today.width/2)-margin/2, today.height-margin);
	iconToday.img.src = "icon_bug.png";
	today.addChild(iconToday);
	
	var tempToday = dctk.createLabelCtrl("tempToday", true);
	//tempToday.font = dctk.createFontByFacename("Arial Narrow", true, false);
	tempToday.setRect((today.width/2)-margin/2, (today.height/3)*2, today.width, today.height-margin);
	tempToday.textColor.rgb = colorValue;
	tempToday.fontSize = 50;
	tempToday.align = dctkLabel.TS_CENTER;
	tempToday.valign = dctkLabel.TS_MIDDLE;
	tempToday.text = "...";
	today.addChild(tempToday);
	
	var locationTxt = dctk.createLabelCtrl("locationTxt", true);
	locationTxt.font = dctk.createFontByFacename("Arial Narrow", true, false);
	locationTxt.setRect(margin, (today.height/20)*11, today.width-margin, (today.height*2/3)-margin/2);
	locationTxt.textColor.rgb = colorValue;
	locationTxt.fontSize = 18;
	locationTxt.align = dctkLabel.TS_CENTER;
	locationTxt.valign = dctkLabel.TS_MIDDLE;
	locationTxt.text = "Loading...";
	today.addChild(locationTxt);
	
	var dateTxt = dctk.createLabelCtrl("dateTxt", true);
	dateTxt.font = dctk.createFontByFacename("Arial Narrow", true, false);
	dateTxt.setRect(margin, (today.height/20)*10, today.width-margin, (today.height/20)*11);
	dateTxt.textColor.rgb = 0x9e9e9e;
	dateTxt.fontSize = 16;
	dateTxt.align = dctkLabel.TS_CENTER;
	dateTxt.valign = dctkLabel.TS_MIDDLE;
	dateTxt.text = "Loading...";
	today.addChild(dateTxt);
	
	var humidityTxt = dctk.createLabelCtrl("humidityTxt", true);
	humidityTxt.font = dctk.createFontByFacename("Arial Narrow", true, false);
	humidityTxt.setRect(margin, (today.height/2)-margin*2, (today.width/2)-(margin/2), (today.height/2)-margin);
	humidityTxt.textColor.rgb = 0x9e9e9e;
	humidityTxt.fontSize = 16;
	humidityTxt.align = dctkLabel.TS_RIGHT;
	humidityTxt.valign = dctkLabel.TS_MIDDLE;
	humidityTxt.text = "Humidity:";
	today.addChild(humidityTxt);
	
	var humidityValue = dctk.createLabelCtrl("humidityValue", true);
	humidityValue.font = dctk.createFontByFacename("Arial Narrow", true, false);
	humidityValue.setRect(today.width/2, (today.height/2)-margin*2, today.width-margin, (today.height/2)-margin);
	humidityValue.textColor.rgb = colorValue;
	humidityValue.fontSize = 16;
	humidityValue.align = dctkLabel.TS_LEFT;
	humidityValue.valign = dctkLabel.TS_MIDDLE;
	humidityValue.text = "...";
	today.addChild(humidityValue);
	
	var windTxt = dctk.createLabelCtrl("windTxt", true);
	windTxt.font = dctk.createFontByFacename("Arial Narrow", true, false);
	windTxt.setRect(margin, (today.height/2)-margin*3, (today.width/2)-(margin/2), (today.height/2)-(margin*2));
	windTxt.textColor.rgb = 0x9e9e9e;
	windTxt.fontSize = 16;
	windTxt.align = dctkLabel.TS_RIGHT;
	windTxt.valign = dctkLabel.TS_MIDDLE;
	windTxt.text = "Wind Speed:";
	today.addChild(windTxt);
	
	var windValue = dctk.createLabelCtrl("windValue", true);
	windValue.font = dctk.createFontByFacename("Arial Narrow", true, false);
	windValue.setRect(today.width/2, (today.height/2)-margin*3, today.width-margin, (today.height/2)-(margin*2));
	windValue.textColor.rgb = colorValue;
	windValue.fontSize = 16;
	windValue.align = dctkLabel.TS_LEFT;
	windValue.valign = dctkLabel.TS_MIDDLE;
	windValue.text = "...";
	today.addChild(windValue);
	
	var pressureTxt = dctk.createLabelCtrl("pressureTxt", true);
	pressureTxt.font = dctk.createFontByFacename("Arial Narrow", true, false);
	pressureTxt.setRect(margin, (today.height/2)-margin*4, (today.width/2)-(margin/2), (today.height/2)-(margin*3));
	pressureTxt.textColor.rgb = 0x9e9e9e;
	pressureTxt.fontSize = 16;
	pressureTxt.align = dctkLabel.TS_RIGHT;
	pressureTxt.valign = dctkLabel.TS_MIDDLE;
	pressureTxt.text = "Pressure:";
	today.addChild(pressureTxt);
	
	var pressureValue = dctk.createLabelCtrl("pressureValue", true);
	pressureValue.font = dctk.createFontByFacename("Arial Narrow", true, false);
	pressureValue.setRect(today.width/2, (today.height/2)-margin*4, today.width-margin, (today.height/2)-(margin*3));
	pressureValue.textColor.rgb = colorValue;
	pressureValue.fontSize = 16;
	pressureValue.align = dctkLabel.TS_LEFT;
	pressureValue.valign = dctkLabel.TS_MIDDLE;
	pressureValue.text = "...";
	today.addChild(pressureValue);
	
	var dewTxt = dctk.createLabelCtrl("dewTxt", true);
	dewTxt.font = dctk.createFontByFacename("Arial Narrow", true, false);
	dewTxt.setRect(margin, (today.height/2)-margin*5, (today.width/2)-(margin/2), (today.height/2)-(margin*4));
	dewTxt.textColor.rgb = 0x9e9e9e;
	dewTxt.fontSize = 16;
	dewTxt.align = dctkLabel.TS_RIGHT;
	dewTxt.valign = dctkLabel.TS_MIDDLE;
	dewTxt.text = "Dew Point:";
	today.addChild(dewTxt);
	
	var dewValue = dctk.createLabelCtrl("dewValue", true);
	dewValue.font = dctk.createFontByFacename("Arial Narrow", true, false);
	dewValue.setRect(today.width/2, (today.height/2)-margin*5, today.width-margin, (today.height/2)-(margin*4));
	dewValue.textColor.rgb = colorValue;
	dewValue.fontSize = 16;
	dewValue.align = dctkLabel.TS_LEFT;
	dewValue.valign = dctkLabel.TS_MIDDLE;
	dewValue.text = "...";
	today.addChild(dewValue);
	
	var gustsTxt = dctk.createLabelCtrl("gustsTxt", true);
	gustsTxt.font = dctk.createFontByFacename("Arial Narrow", true, false);
	gustsTxt.setRect(margin, (today.height/2)-margin*6, (today.width/2)-(margin/2), (today.height/2)-(margin*5));
	gustsTxt.textColor.rgb = 0x9e9e9e;
	gustsTxt.fontSize = 16;
	gustsTxt.align = dctkLabel.TS_RIGHT;
	gustsTxt.valign = dctkLabel.TS_MIDDLE;
	gustsTxt.text = "Gusts:";
	today.addChild(gustsTxt);
	
	var gustsValue = dctk.createLabelCtrl("gustsValue", true);
	gustsValue.font = dctk.createFontByFacename("Arial Narrow", true, false);
	gustsValue.setRect(today.width/2, (today.height/2)-margin*6, today.width-margin, (today.height/2)-(margin*5));
	gustsValue.textColor.rgb = colorValue;
	gustsValue.fontSize = 16;
	gustsValue.align = dctkLabel.TS_LEFT;
	gustsValue.valign = dctkLabel.TS_MIDDLE;
	gustsValue.text = "...";
	today.addChild(gustsValue);
	
	var rainTxt = dctk.createLabelCtrl("rainTxt", true);
	rainTxt.font = dctk.createFontByFacename("Arial Narrow", true, false);
	rainTxt.setRect(margin, (today.height/2)-margin*7, (today.width/2)-(margin/2), (today.height/2)-(margin*6));
	rainTxt.textColor.rgb = 0x9e9e9e;
	rainTxt.fontSize = 16;
	rainTxt.align = dctkLabel.TS_RIGHT;
	rainTxt.valign = dctkLabel.TS_MIDDLE;
	rainTxt.text = "Rain:";
	today.addChild(rainTxt);
	
	var rainValue = dctk.createLabelCtrl("rainValue", true);
	rainValue.font = dctk.createFontByFacename("Arial Narrow", true, false);
	rainValue.setRect(today.width/2, (today.height/2)-margin*7, today.width-margin, (today.height/2)-(margin*6));
	rainValue.textColor.rgb = colorValue;
	rainValue.fontSize = 16;
	rainValue.align = dctkLabel.TS_LEFT;
	rainValue.valign = dctkLabel.TS_MIDDLE;
	rainValue.text = "...";
	today.addChild(rainValue);
	
	var forecastOne = dctk.createPanelCtrl("forecastOne", true);
	forecastOne.setRect(root.width/2,(root.height/5)*4,root.width-margin,(root.height)-margin);
	forecastOne.color.rgb = 0x000000;
	forecastOne.color.rgba = 0x5B5;
	forecastOne.filled = true;
	forecastOne.border.thickness = 3;
    forecastOne.border.rounded = true;
    //today.border.faded = true;
	root.addChild(forecastOne);
	
	var iconOne = dctk.createImageCtrl("iconOne", true);
	iconOne.setRect(margin/4, margin/4, forecastOne.width/5, forecastOne.height-(margin/4));
	iconOne.img.src = "icon_bug.png";
	forecastOne.addChild(iconOne);
	
	var valueOne = dctk.createLabelCtrl("valueOne", true);
	valueOne.font = dctk.createFontByFacename("Arial Narrow", true, false);
	valueOne.setRect(forecastOne.width/5, margin/4, forecastOne.width-(margin/4), forecastOne.height-(margin/4));
	valueOne.textColor.rgb = colorValue;
	valueOne.fontSize = forecastFont;
	valueOne.align = dctkLabel.TS_LEFT;
	valueOne.valign = dctkLabel.TS_MIDDLE;
	valueOne.text = "Loading...";
	forecastOne.addChild(valueOne);
	
	var forecastTwo = dctk.createPanelCtrl("forecastTwo", true);
	forecastTwo.setRect(root.width/2,(root.height/5)*3,root.width-margin,(root.height*4/5)-margin);
	forecastTwo.color.rgb = 0x000000;
	forecastTwo.color.rgba = 0x5B5;
	forecastTwo.filled = true;
	forecastTwo.border.thickness = 3;
    forecastTwo.border.rounded = true;
    //today.border.faded = true;
	root.addChild(forecastTwo);
	
	var iconTwo = dctk.createImageCtrl("iconTwo", true);
	iconTwo.setRect(margin/4, margin/4, forecastTwo.width/5, forecastTwo.height-(margin/4));
	iconTwo.img.src = "icon_bug.png";
	forecastTwo.addChild(iconTwo);
	
	var valueTwo = dctk.createLabelCtrl("valueTwo", true);
	valueTwo.font = dctk.createFontByFacename("Arial Narrow", true, false);
	valueTwo.setRect(forecastTwo.width/5, margin/4, forecastTwo.width-(margin/4), forecastTwo.height-(margin/4));
	valueTwo.textColor.rgb = colorValue;
	valueTwo.fontSize = forecastFont;
	valueTwo.align = dctkLabel.TS_LEFT;
	valueTwo.valign = dctkLabel.TS_MIDDLE;
	valueTwo.text = "Loading...";
	forecastTwo.addChild(valueTwo);
	
	var forecastThree = dctk.createPanelCtrl("forecastThree", true);
	forecastThree.setRect(root.width/2,(root.height/5)*2,root.width-margin,(root.height*3/5)-margin);
	forecastThree.color.rgb = 0x000000;
	forecastThree.color.rgba = 0x5B5;
	forecastThree.filled = true;
	forecastThree.border.thickness = 3;
    forecastThree.border.rounded = true;
    //today.border.faded = true;
	root.addChild(forecastThree);
	
	var iconThree = dctk.createImageCtrl("iconThree", true);
	iconThree.setRect(margin/4, margin/4, forecastThree.width/5, forecastThree.height-(margin/4));
	iconThree.img.src = "icon_bug.png";
	forecastThree.addChild(iconThree);
	
	var valueThree = dctk.createLabelCtrl("valueThree", true);
	valueThree.font = dctk.createFontByFacename("Arial Narrow", true, false);
	valueThree.setRect(forecastThree.width/5, margin/4, forecastThree.width-(margin/4), forecastThree.height-(margin/4));
	valueThree.textColor.rgb = colorValue;
	valueThree.fontSize = forecastFont;
	valueThree.align = dctkLabel.TS_LEFT;
	valueThree.valign = dctkLabel.TS_MIDDLE;
	valueThree.text = "Loading...";
	forecastThree.addChild(valueThree);
	
	var forecastFour = dctk.createPanelCtrl("forecastFour", true);
	forecastFour.setRect(root.width/2,(root.height/5),root.width-margin,(root.height*2/5)-margin);
	forecastFour.color.rgb = 0x000000;
	forecastFour.color.rgba = 0x5B5;
	forecastFour.filled = true;
	forecastFour.border.thickness = 3;
    forecastFour.border.rounded = true;
    //today.border.faded = true;
	root.addChild(forecastFour);
	
	var iconFour = dctk.createImageCtrl("iconFour", true);
	iconFour.setRect(margin/4, margin/4, forecastFour.width/5, forecastFour.height-(margin/4));
	iconFour.img.src = "icon_bug.png";
	forecastFour.addChild(iconFour);
	
	var valueFour = dctk.createLabelCtrl("valueFour", true);
	valueFour.font = dctk.createFontByFacename("Arial Narrow", true, false);
	valueFour.setRect(forecastFour.width/5, margin/4, forecastFour.width-(margin/4), forecastFour.height-(margin/4));
	valueFour.textColor.rgb = colorValue;
	valueFour.fontSize = forecastFont;
	valueFour.align = dctkLabel.TS_LEFT;
	valueFour.valign = dctkLabel.TS_MIDDLE;
	valueFour.text = "Loading...";
	forecastFour.addChild(valueFour);
	
	var logo = dctk.createImageCtrl("logo", true);
	logo.setRect(510, 15, 625, 55);
	logo.img.src = "weatherbug.png";
	root.addChild(logo);
	
	var poweredTxt = dctk.createLabelCtrl("valueFour", true);
	poweredTxt.font = dctk.createFontByFacename("Arial Narrow", true, false);
	poweredTxt.setRect(510, 45, 635, 55);
	poweredTxt.textColor.rgb = colorTxt;
	poweredTxt.fontSize = 10;
	poweredTxt.align = dctkLabel.TS_CENTER;
	poweredTxt.valign = dctkLabel.TS_MIDDLE;
	poweredTxt.text = "Powered By";
	root.addChild(poweredTxt);
	
	var btnPhotos = dctk.createButtonCtrl("btnPhotos", true);
	btnPhotos.setRect(root.width/2, margin-3, (root.width/2)+90, margin+40);
	btnPhotos.text = "Cameras";
	btnPhotos.fontSize = 18;
	btnPhotos.onSelect = function(e) { showCamPopup(); }
	root.addChild(btnPhotos);
	
	var btnSettings = dctk.createButtonCtrl("btnSettings", true);
	btnSettings.setRect((root.width/2)+95, margin-3, (root.width)-135, margin+40);
	btnSettings.text = "Settings";
	btnSettings.fontSize = 18;
	btnSettings.onSelect = function(e) { zipCode = ""; showUserPopup(); }
	root.addChild(btnSettings);
	
	btnPhotos.rightSibling = btnSettings;
	btnSettings.leftSibling = btnPhotos;
	
	dctk.focusedElement = btnPhotos;
	
	var storage = connected.openStorage(weatherStorage,true);
	zipCode = storage.get(weatherCode,zipCode)
	
	if(zipCode == '') 
	{
		showUserPopup();
	}
	else if (zipCode == null) {
		showUserPopup();
	}
	
	startLiveRequest();
	startForecastRequest();
	
	//connected.toolkit.debug.drawElementOutline = true
}